import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal, Image } from 'react-native';

interface SignInModalProps {
  visible: boolean;
  onClose: () => void;
  onSignIn: () => void;
}

const SignInModal: React.FC<SignInModalProps> = ({ visible, onClose, onSignIn }) => {
  const signInData = [
    { day: '第一天', reward: '10积分' },
    { day: '第二天', reward: '10积分' },
    { day: '第三天', reward: '10积分' },
    { day: '第四天', reward: '10积分' },
    { day: '第五天', reward: '10积分' },
    { day: '第六天', reward: '30元代金券' },
  ];

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          {/* 关闭按钮 */}
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <Text style={styles.closeButtonText}>×</Text>
          </TouchableOpacity>

          {/* 标题 */}
          <View style={styles.header}>
            <Text style={styles.title}>每日签到得好礼</Text>
            <Text style={styles.subtitle}>连续签到7天有惊喜</Text>
          </View>
          
          {/* 签到列表 */}
          <View style={styles.signInList}>
            {signInData.map((item, index) => (
              <View key={index} style={styles.signInItem}>
                <Text style={styles.dayText}>{item.day}</Text>
                <Text style={styles.rewardText}>{item.reward}</Text>
              </View>
            ))}
          </View>

          {/* 签到按钮 */}
          <TouchableOpacity style={styles.signInButton} onPress={onSignIn}>
            <Text style={styles.signInButtonText}>点击签到</Text>
          </TouchableOpacity>

          {/* 酒店名称 */}
          <Text style={styles.hotelName}>万枫国际酒店</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: '80%',
    backgroundColor: '#FF6B6B',
    borderRadius: 12,
    padding: 20,
    alignItems: 'center',
  },
  closeButton: {
    position: 'absolute',
    right: 10,
    top: 10,
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeButtonText: {
    fontSize: 24,
    color: '#fff',
    fontWeight: '300',
  },
  header: {
    width: '100%',
    alignItems: 'center',
    marginBottom: 20,
    marginTop: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 12,
    color: '#fff',
    opacity: 0.8,
  },
  signInList: {
    width: '100%',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 20,
  },
  signInItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  dayText: {
    fontSize: 14,
    color: '#333',
  },
  rewardText: {
    fontSize: 14,
    color: '#666',
  },
  signInButton: {
    backgroundColor: '#fff',
    paddingHorizontal: 40,
    paddingVertical: 12,
    borderRadius: 25,
    marginBottom: 15,
  },
  signInButtonText: {
    color: '#FF6B6B',
    fontSize: 16,
    fontWeight: 'bold',
  },
  hotelName: {
    fontSize: 12,
    color: '#fff',
    opacity: 0.8,
  },
});

export default SignInModal; 